<template>
	<view class="tui-centen">
		<uni-nav-bar fixed left-icon="back" title="景区" @clickLeft="clickLeft()"></uni-nav-bar>
		<view class="tui-flex">
			<view class="tui-flex1" :style="!boxShow ? 'color: #15BEA1;':''" @click="boxShow = !boxShow">景点介绍</view>
			<view class="tui-flex2" :style="boxShow ? 'color: #15BEA1;':''" @click="boxShow = !boxShow">预订须知</view>
		</view>
		<view v-if="boxShow" class="tui-book-box">
			<view v-for="(item, index) in conterList" :key="index">
				<view class="tui-book-notice-title">{{item.title}}</view>
				<view class="tui-notice-title-box" v-for="(conItem, conIdx) in item.noticeList" :key="conIdx">
					<view class="tui-book-notice-txt">{{conItem.name}}</view>
					<view class="tui-book-notice-ccenter">{{conItem.text}}</view>
				</view>
			</view>
		</view>
		<view v-else>
			<introduce></introduce>
		</view>
		
	</view>
</template>

<script>
	import Introduce from './components/introduce.vue'
	
	export default {
		components: {
			Introduce
		},
		data() {
			return {
				boxShow: true,
				conterList: [
					{
						title: '一、使用说明',
						noticeList: [
							{ name: '1.限购政策:', text: '实名制购票，每个身份证限购1份' },
							{ name: '2.预定时间:', text: '最晚必须在出行当天21:00前购买，预订成功后可立即使用。' },
							{ name: '3.入园时间:', text: '7:00-21:00' }
						]
					},
					{
						title: '二、景区免费政策',
						noticeList: [
							{ name: '', text: '1.2米以下儿童、65周岁（含）以上老人、残疾人、现役军人、军队退休干部凭有效证件免票。' }
						]
					}
				]
			}
		},
		onLoad(options) {
			this.boxShow = options.boxShow
		},
		methods: {
            clickLeft() {
                uni.navigateBack()
            }
		}
	}
</script>

<style lang="scss">
	.tui-centen{
		line-height: 1.8;
		font-size: 28rpx;
		background-color: #F3F3F3;
		height: 100%;
	}
	.tui-book-box {
		padding: 20rpx;
		.tui-book-notice-title {
			font-size: 36rpx;
			font-weight: 600;
			padding: 15rpx 0;
		}
		.tui-notice-title-box {
			padding: 15rpx 0;
			.tui-book-notice-txt {
				font-size: 32rpx;
				font-weight: 600;
			}
			.tui-book-notice-ccenter{
				font-size: 32rpx;
			}
		}
	}
	.tui-flex {
		padding: 20rpx;
		background-color: #fff;
		.tui-flex1, .tui-flex2{
			flex: 1;
			text-align: center;
			font-size: 34rpx;
		}
		.tui-flex1{
			border-right: 2rpx solid #eee;
		}
	}
	
</style>
